import React, {Component} from 'react';
import {toggleSideMenu} from "redux/action/app";
import {connect} from "react-redux";
import {MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import {Breadcrumb} from "antd";
import {withRouter} from "react-router-dom";
import {menuItems} from "menus/main";


class TopLeft extends Component<any,any> {

    getItems=()=>{
        const paths=this.props.location.pathname.split("/")
        const resultItems=[]
        const menuItem:any=menuItems.find(item=>item.key==="/".concat(paths[1]))
        if(menuItem){
            resultItems.push(menuItem)
        }
        if(menuItem&&menuItem.children){

            const child=menuItem.children.find(item=>item.key==="/".concat(paths[1],"/",paths[2]))
            if(child)
                resultItems.push(child)
        }

        return  resultItems.map(item=><Breadcrumb.Item key={item?.key}>{item?.title}</Breadcrumb.Item>)
    }
    render() {
        return (
            <div className="d-flex align-items-center">
                {React.createElement(this.props.menuCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: () => {this.props.toggleSideMenu()},
                })}
                <Breadcrumb>
                    {this.getItems()}
                </Breadcrumb>
            </div>
        );
    }
}

const mapStateToProps=(state:any)=>{
    return state.app
}

const mapDispatchToProps={toggleSideMenu}

const WithConnect=connect(mapStateToProps,mapDispatchToProps)(TopLeft)

export default withRouter(WithConnect);
